<template>
    <div class="studentDynamicBox">
        <div class="title">
            <label>空间动态</label>
        </div>

        <div class="dynamicBox">
            <div class="dynamicList" v-for="(item, index) in dynamicPageList.list" :key="index">
                <!--头像和名字-->
                <div class="userInfo clearFix">
                    <div class="avatar">
                        <el-avatar :size="50" :src="item.photo | pictureUrl" @error="errorHandler">
                        </el-avatar>
                    </div>
                    <div class="nameBox">
                        <label class="userName">{{item.username}}</label>
                        <label class="time">{{item.creationtime}}</label>
                    </div>
                </div>

                <!--内容与图片-->
                <div class="dynamicContent">
                    <p v-html="item.content"></p>
                    <ul class="contentBox clearFix" v-if="item.picturesList">
                        <li class="imgBox" v-for="(itemin, indexin) in item.picturesList.slice(0,10)" :key="indexin">
                            <el-image :src="itemin.pictureurl | pictureUrl">
                                <div slot="placeholder" class="image-slot">
                                    加载中<span class="dot">...</span>
                                </div>
                                <div slot="error" class="image-slot">
                                    <i class="el-icon-picture-outline"></i>
                                </div>
                            </el-image>
                        </li>
                    </ul>
                </div>

                <!--小眼睛一组图标-->
                <div class="forwardBox">
                    <label>
                        <i class="el-icon-view"></i>
                        <span>{{item.viewnum}}</span>
                    </label>
                    <el-divider direction="vertical"></el-divider>
                    <!-- <label>
                        <i class="iconfont icon-zan"></i>
                        <span>{{item.givenum}}</span>
                    </label> -->
                    <el-divider direction="vertical"></el-divider>
                    <label>
                        <i class="el-icon-chat-dot-square"></i>
                        <span>{{item.commentnum}}</span>
                    </label>
                    <!-- <el-divider direction="vertical"></el-divider> -->
                    <!-- <label>
                        <i class="el-icon-share"></i>
                        <span>{{item.collectnum}}</span>
                    </label> -->
                </div>
                <Comment :data='item' @dynamicPage='dynamicPage' @dynamicComment='dynamicComment'></Comment>
                <!--评论内容-->
                <Commentlist ref="commentlist" :data='item' ></Commentlist>
            </div>
        </div>
        <el-divider v-if="limitMore < dynamicPageList.total"  @click="getMore">加载更多...</el-divider>
        <el-divider v-else>已加载到底...</el-divider>
    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import Commentlist from '@/components/comment/commentListDynamic'
    import Comment from '@c/comment/CommentDynamic';
    export default {
        components:{
            Comment,
            Commentlist
        },
        computed:{
            ...mapState({
                userInfo: state => state.userModule.userInfo,
                otherUserInfo: state => state.userModule.otherUserInfo,
            })
        },
        created(){
            this.dynamicPage()
        },
        data(){
            return{
                dynamicPageList:{
                    total: 0,
                    list: []
                },
                textarea:"",
                checked:false,
                limitMore:10,
                page: 1
            }
        },
        methods: {
            getMore(){
                if(this.limitMore < this.dynamicPageList.total){
                    this.limitMore +=10
                    this.page++
                    this.dynamicPage()
                }
            },
            // 获取动态
            dynamicPage(){
                this.$store.dispatch('dynamicModule/dynamicPageSchool',{
                    limit: 10,
                    page: this.page,
                    schoolId: this.otherUserInfo.xxdm,
                    userId: this.otherUserInfo.userid || this.otherUserInfo.id
                }).then( res =>{
                    if(res.data.code ==200){
                        this.dynamicPageList.total = res.data.result.total
                        this.dynamicPageList.list.push(...res.data.result.list)
                    }
                })
            },
            dynamicComment(params){
                this.$nextTick(() =>{
                    this.$refs.commentlist.map(item => {
                        item.pageCommentlist()
                    })
                })
            },
            errorHandler() {
                return true
            }
        }
    }
</script>

<style lang="scss" scoped>
.studentDynamicBox{
    background-color: white;
    padding-bottom: 15px;
    .title{
        background-color: #f5f7fa;
        font-size: 14px;
        color: #303133;
        box-sizing: border-box;
        padding: 10px;
        text-align: left;
    }
    .dynamicBox{
        box-sizing: border-box;
        padding: 0 10px;
        margin: 10px 0;

       .dynamicList{
           border: 1px solid #909399;
           box-sizing: border-box;
           padding: 10px 50px 10px 10px;
           margin-bottom: 20px;
           .userInfo{
               .avatar{
                   float: left;
               }
               .nameBox{
                   float: left;
                   text-align: left;
                   margin-left: 10px;
                   label{
                       display: block;
                   }
                   .time{
                       font-size: 12px;
                       color: #909399;
                       margin-top: 8px;
                   }
                   .userName{
                       font-size: 14px;
                       color: #409EFF;
                       margin-top: 5px;
                   }
               }
           }
           .dynamicContent{
               text-align: left;
               label{
                   color: #409EFF;
               }
               p{
                   overflow-wrap: anywhere;
                   margin-block-start: 0;
                   margin-block-end: 0;
                   text-align: justify;
                   color: #303133;
                   font-size: 14px;
                   margin: 10px 0;
               }
               .contentBox{
                   margin-block-start: 0;
                   margin-block-end: 0;
                   padding-inline-start: 0;
                   list-style-type: none;
                   .imgBox{
                       width: 196px;
                       height: 196px;
                       float: left;
                       margin: 0 10px 10px 0;
                   }
               }
           }


       }

       .forwardBox{
           font-size: 14px;
           color: #909399;
           text-align: right;
           margin: 10px 0;
           label{
               cursor: pointer;
               span{
                   margin-left: 6px;
               }
           }
       }

        .inputBox{
            .btns{
                margin: 10px 0;
                .icons{
                    display: block;
                    float: left;
                    margin-top: 6px;
                    i{
                        font-size: 22px;
                        color: #409EFF;
                        margin-right: 15px;
                        cursor: pointer;
                    }
                }
                .btnPL{
                    display: block;
                    float: right;
                }
            }
        }

       .interaction{
           box-sizing: border-box;
           padding: 10px 15px;
           border-top: 1px solid #909399;
           .commentList{
               .avatar{
                   float: left;
               }
               .nameBox{
                   float: left;
                   text-align: left;
                   margin-left: 10px;
                   width: 855px;
                   p{
                       margin-block-start: 0;
                       margin-block-end: 0;
                       text-align: justify;
                       color: #303133;
                       font-size: 14px;
                       margin: 2px 0;
                       label{
                           color: #409EFF;
                       }
                   }
                   .imgBox{
                       width: 196px;
                       height: 196px;
                       margin: 5px 0;
                   }
                   .time{
                       color: #303133;
                       font-size: 12px;
                       margin-right: 10px;
                   }
               }
           }
           .huiFuComment{
               margin: 10px 0px 10px 40px;
               .huifu{
                   margin: 0 5px;
               }
           }
       }

    }

    .clearFix::after{
        content: "";
        display: block;
        width: 100%;
        font-size: 0;
        clear: both;
    }
}
</style>